@charset "utf-8";
/* CSS Document */

*{ padding:0px; margin:0px; border:0px;}
p{ text-indent:24px}
a{ text-decoration:none;}
li{ list-style:none;}
body{ background: #eee;}
.header{ width:100%; height:100px; background:#000}
.header_in{ width:980px; height:100px; margin:0 auto; background:#000; color:#FFF; font-size:50px; line-height:100px; position:relative;}
.header_in a{ color: #FFF;}
.header_in a:hover{ color:#FF0;}
.touxiang{ width:100px; height:100px; background: url(images/touxiang2.jpg); border:5px solid #eee; border-radius:100px; position:absolute; top:50px; left:415px;}
.lead{ width:200px; height:100px; float:right;}
.lead li{ float:left; font-size:20px; margin-left:20px; line-height:100px;}
.lead a{ color:#FFF;}
.lead a:hover{ color:#F0F;}
.nav{ width:980px; height:600px; margin:0 auto; margin-top:50px; background:#000; position:relative; z-index:-1;}
.bilibili{
width:150px;
height:150px;
background: url(images/bilibili.jpg) no-repeat;
position:relative;
animation-name:myfirst;
animation-duration:20s;
animation-timing-function: ease-in-out;

animation-iteration-count:infinite;
animation-direction: normal;
animation-play-state: running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:20s;
-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:20s;
-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
-o-animation-play-state:running;
text-align:center; line-height:110px; color:#F00;
}
@keyframes myfirst
{
0%   {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
25%  {background:url(images/bilibili.jpg); left:980px; top:-150px;}
50%  {background:url(images/bilibili.jpg); left:980px; top:600px;}
75%  {background:url(images/bilibili.jpg); left:-150px; top:600px;}
100% {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
25%  {background:url(images/bilibili.jpg); left:980px; top:-150px;}
50%  {background:url(images/bilibili.jpg); left:980px; top:600px;}
75%  {background:url(images/bilibili.jpg); left:-150px; top:600px;}
100% {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
25%  {background:url(images/bilibili.jpg); left:980px; top:-150px;}
50%  {background:url(images/bilibili.jpg); left:980px; top:600px;}
75%  {background:url(images/bilibili.jpg); left:-150px; top:600px;}
100% {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
25%  {background:url(images/bilibili.jpg); left:980px; top:-150px;}
50%  {background:url(images/bilibili.jpg); left:980px; top:600px;}
75%  {background:url(images/bilibili.jpg); left:-150px; top:600px;}
100% {background:url(images/bilibili.jpg); left:-150px; top:-150px;}
}
.page{ width:200px; height:300px; margin-top:20px; color:#666; float:left;}
.page_two{ width:200px; height:300px; margin-top:20px; color:#666; float: right;}
.page_mid{width:500px; height:300px; margin-left:40px;margin-top:20px; color:#666; float: left;}
.foot{ width:100%; height:25px; margin-top:140px; }
.footer{ width:250px; height:25px; margin:0 auto;}
.malilian{ width:150px; height:170px; }
.pikaqiu{ width:110px; height:130px; background: url(images/pikaqiu.jpg) no-repeat; position:absolute; top:50px; right:-110px; z-index:99;}